import mapboxgl from "mapbox-gl";
import MapboxDraw from "@mapbox/mapbox-gl-draw";
import "@mapbox/mapbox-gl-draw/dist/mapbox-gl-draw.css";
const createMap = {
    data() {
        return {
            mapType: 'img_w'
        }
    },
    methods: {
        addMap() {
            this.key = Math.random()
            let _this = this;
            mapboxgl.accessToken =
                "pk.eyJ1IjoieWItd2FuZyIsImEiOiJja25qcWM2NnQwMzRuMm9sYjBtNTd0dmIyIn0.9xYWDRJQwshRfrz3JRECXA";
            const map = new mapboxgl.Map({
                container: "map",
                // 加载天地图
                style: {
                    version: 8,
                    sources: {
                
                        // 混合地图
                        ter_w: {
                            type: "raster",
                            tiles: [
                                `http://t0.tianditu.gov.cn/DataServer?T=ter_w&x={x}&y={y}&l={z}&tk=53601310a9c2ea79748468191c57382a`,
                            ],
                            tileSize: 256,
                        },

                        // 矢量地图
                        vec_w: {
                            type: "raster",
                            tiles: [
                                `https://t0.tianditu.gov.cn/vec_w/wmts?tk=53601310a9c2ea79748468191c57382a&service=WMTS&request=GetTile&version=1.0.0&style=default&tilematrixSet=w&format=tiles&width=256&height=256&layer=vec&tilematrix={z}&tilerow={y}&tilecol={x}`,
                            ],
                            tileSize: 256,
                        },

                        // 天地图底图
                        img_w: {
                            type: "raster",
                            tiles: [
                                `https://t0.tianditu.gov.cn/img_w/wmts?tk=53601310a9c2ea79748468191c57382a&service=WMTS&request=GetTile&version=1.0.0&style=default&tilematrixSet=w&format=tiles&width=256&height=256&layer=img&tilematrix={z}&tilerow={y}&tilecol={x}`,
                                // "https://iserver.supermap.io/iserver/services/map-china400/rest/maps/ChinaDark/zxyTileImage.png?z={z}&x={x}&y={y}",                      
                            ],
                            tileSize: 256,
                        },


                        labelLayer_img: {
                            type: "raster",
                            tiles: [
                              "https://t0.tianditu.gov.cn/cia_w/wmts?tk=53601310a9c2ea79748468191c57382a&service=WMTS&request=GetTile&version=1.0.0&style=default&tilematrixSet=w&format=tiles&width=256&height=256&layer=cia&tilematrix={z}&tilerow={y}&tilecol={x}",
                            ],
                            tileSize: 256,
                          },

                          labelLayer_vec: {
                            type: "raster",
                            tiles: [
                              "https://t0.tianditu.gov.cn/cva_w/wmts?tk=53601310a9c2ea79748468191c57382a&service=WMTS&request=GetTile&version=1.0.0&style=default&tilematrixSet=w&format=tiles&width=256&height=256&layer=cva&tilematrix={z}&tilerow={y}&tilecol={x}",
                            ],
                            tileSize: 256,
                          },
                          nanhai: {
                            type: "raster",
                            tiles: [
                                // 南海区地图
                                "https://gis.leadinsight.cn/geoserver/gwc/service/wmts?SERVICE=WMTS&REQUEST=GetTile&LAYER=nanhai:nanhaiquPhase1Image&TILEMATRIX=EPSG:900913:{z}&TILEMATRIXSET=EPSG:900913&format=image%2Fpng&TileCol={x}&TileRow={y}",
                            ],
                            tileSize: 256,
                        },


                        //图斑数据信息
                        experimentalData: {
                            type: "vector",
                            scheme: "tms",
                            tiles: [
                                "https://gis.leadinsight.cn/geoserver/gwc/service/tms/1.0.0/nanhai%3AexperimentalData@EPSG%3A900913@pbf/{z}/{x}/{y}.pbf",
                            ],
                        }
                    },
                    layers: [
                        //混合地图
                        {
                            id: "ter_w",
                            type: "raster",
                            source: "ter_w",
                        },
                        // 矢量地图
                        {
                            id: "vec_w",
                            type: "raster",
                            source: "vec_w",
                        },
                        // 默认天地图底图
                        {
                            id: "img_w",
                            type: "raster",
                            source: "img_w",
                        },
                        // {
                        //     id: "deep-bg",
                        //     type: "background", // 背景图层(蒙版)
                        //     paint: {
                        //         "background-color": "rgba(5, 28, 56, .6)",
                        //     },
                        // },
                        {
                            id: "labelLayer_img",
                            type: "raster",
                            source: "labelLayer_img",
                          },
                
                        {
                            id: "labelLayer_vec",
                            type: "raster",
                            source: "labelLayer_vec",
                          },
          

                        {
                            id: "nanhai",
                            type: "raster",
                            source: "nanhai",
                        },
        
               
                       
                      
                        //图斑边缘
                        {
                            id: `experimentalData-line-layer`,
                            source: `experimentalData`,
                            "source-layer": `experimentalData`,
                            type: "line",
                            layout: {
                                "line-cap": "round",
                                "line-join": "round",
                            },
                            paint: {
                                // "line-color":[
                                // 		"match",["get","二级类型"],
                                // 		"田地","#AFD18A",
                                // 		"水田","#3FA8AD",
                                //     "种植大棚","#79A449",
                                // 		"鱼塘","#3A3FD2",
                                //     "水产越冬棚","#5E3F8B",
                                //     "果园","#B14356",
                                //     "茶园","#C5CB48",
                                // 		"#FC8452"
                                // 	],
                                "line-color": "rgba(255, 255,0, 1)",
                                // "line-width": 1,
                                // "line-opacity":.5,
                                // "line-dasharray": [1, 3],
                            },
                        },
                        //图斑
                        {
                            id: `experimentalData-area-layer`,
                            source: `experimentalData`,
                            "source-layer": `experimentalData`,
                            type: "fill",
                            paint: {
                                "fill-color": [
                                    "match",
                                    ["get", "二级类型"],
                                    "田地",
                                    "#AFD18A",
                                    "水田",
                                    "#3FA8AD",
                                    "种植大棚",
                                    "#79A449",
                                    "鱼塘",
                                    "#3A3FD2",
                                    "水产越冬棚",
                                    "#5E3F8B",
                                    "果园",
                                    "#B14356",
                                    "茶园",
                                    "#C5CB48",
                                    "旱地",
                                    "#333333",
                                    "#FC8452",
                                ],
                                "fill-opacity": 0.3,
                            },
                        },
                    ],
                },
                center: this.center,
                zoom: 11
            });

            map.on("load", function () {

                map.on("click", "experimentalData-area-layer", (e) => {
                    e.preventDefault();
                    this.key = Math.random()
                    _this.$refs["distance"].innerHTML = "";
                    _this.geojson.features = [];

                    console.log("e.features[0].properties:", e.features[0].properties);
                    _this.LandParcelInfo = e.features[0].properties;
                    _this.LandParcelInfoVisible = true;
                    //通过图斑ID查询地块信息
                    console.log("****" + _this.LandParcelInfo.DKBH);
                    _this.$axios
                        .get("rbac/data/LandInfo/getList", {
                            params: {
                                "landInfo.landCode": _this.LandParcelInfo['DKBH'],
                                "systemTypes": "SS1"
                            },
                        })
                        .then((res) => {
                            if (res.data.list.length > 0) {
                                //系统库有的地块
                                _this.LandParcelInfo = res.data.list[0];
                            } else {
                                //系统库没有的地块
                                _this.LandParcelInfo.landCode = _this.LandParcelInfo['DKBH'];
                                _this.LandParcelInfo.landTownCode = _this.LandParcelInfo['镇街'];
                                _this.LandParcelInfo.landVillageCode = _this.LandParcelInfo['村居'];
                                _this.LandParcelInfo.landArea = _this.LandParcelInfo['AREA'];
                                _this.LandParcelInfo.landType = _this.LandParcelInfo['二级类型'];
                                _this.LandParcelInfo.landProduce = _this.LandParcelInfo['作物'];
                            }

                            //查询地块关联主体生产信息 &landInfo.landCode=NHQ72689
                            _this.$axios
                                .get("rbac/data/LandSubject/get", {
                                    params: {
                                        "landSubject.lsLandCode": _this.LandParcelInfo.landCode,
                                    },
                                })
                                .then((res) => {
                                    console.log(res.data);
                                    _this.subjectData = res.data.list;
                                });
                        });
                });

                _this.cj(map);

                // 点击地图其它地方取消弹窗
                map.on("click", (e) => {
                    if (e.defaultPrevented) return;
                    _this.LandParcelInfoVisible = false;
                });

                _this.map = map;
                let currentTask;
                if (localStorage.getItem("currentTask/setCurrentTask")) {
                    currentTask = JSON.parse(
                        localStorage.getItem("currentTask/setCurrentTask")
                    );
                }

                if (Object.keys(currentTask).length === 0) {
                    if (localStorage.getItem('SYS_TYPE') === 'SS1') {
                        _this.setLevel(["鱼塘"]);
                    } else if (localStorage.getItem('SYS_TYPE') === 'SS2') {
                        _this.setLevel(["田地", "水田", "旱地", "种植大棚", "水产越冬棚"]);
                    }
                } else {
                    let arr = [];
                    currentTask.data.treeData.list.forEach((element) => {
                        if (element.administrativeCode.length > 9) {
                            arr.push(element.administrativeName);
                        }
                    });
                    console.log(arr)
                    _this.$set(_this.filterObj, "streetsValue", arr);
                    _this.mapFilter();
                    _this.panToTown(currentTask.data.treeData.list[0].administrativeName);
                    console.log(currentTask.data);
                }

                _this.$store.commit("Map/saveMap", _this.map);

               

                document
                    .getElementsByClassName("mapbox-gl-draw_polygon")[0]
                    .setAttribute("title", "框选图斑");
                document
                    .getElementsByClassName("mapbox-gl-draw_trash")[0]
                    .setAttribute("title", "删除已绘制的框选线条");
            });

             //draw
             const draw = new MapboxDraw({
                displayControlsDefault: false,
                controls: {
                    // point: true,
                    polygon: true,
                    trash: true,
                },
                defaultMode: "draw_polygon",
            });
            map.addControl(draw, "top-left");
            map.on("draw.create", this.createArea);
            // map.on("draw.delete", this.deleteArea);
            // map.on("draw.update", this.updateArea);
            ///取消绘制状态
            draw.trash();
            window.Draw = draw;

        }
    },
    mounted() {
        this.addMap()
    },
}

export default createMap;